import module namespace page="http://sendmeafilter.com/common/page" at "common/page.xqy";
import module namespace security="http://sendmeafilter.com/common/security" at "common/security.xqy";

declare boundary-space preserve;
declare option xdmp:mapping "false";

page:page (
	(
		page:meta('title', 'Order - SendMeAFilter.com'),
		page:meta('description', 'Order A Filter - SendMeAFilter.com'),
		page:meta('keywords', 'furnace heater order filter merv periodic air comfort vent ventilation'),
		page:meta('terms')
	),
	(
	<script id="kart" type="text/x-handlebars-template">
		<div class="{{{{#unless nothing}}}}kart-inner{{{{/unless}}}}">
			<table class="affiliate-table" width="100%">
				<colgroup align="justify">
					<col width="5%"/>
					<col width="5%"/>
					<col width="50%"/>
					<col width="10%"/>
					<col width="10%"/>
				</colgroup>
				<tr class="table-align-left kart-title">
					<th colspan="5"><span class="kart-total-title">Order Id: <span class="kart-id">{{{{orderid}}}}</span></span></th>
				</tr>
				<tr class="table-align-left kart-title">
					<th colspan="5">&nbsp;</th>
				</tr>
				<tr class="table-align-left kart-title">
					<th>&nbsp;</th>
					<th class="table-align-right2">Qty</th>
					<th>Description</th>
					<th class="table-align-right2">Price</th>
					<th class="table-align-right2">Total</th>
				</tr>
				{{{{#each lineItem}}}}
					<tr class="table-align-left {{{{class}}}}">
						{{{{#if spanall}}}}
							<th class="table-valign-bottom" colspan="5">
								{{{{id}}}}
							</th>
						{{{{else}}}}
							<th class="table-valign-bottom">
								{{{{#if id}}}}
									<input class="removeItem small-button-class" name="{{{{id}}}}" value="Remove" type="button"/>
								{{{{else}}}}
									&nbsp;
								{{{{/if}}}}
							</th>
						{{{{/if}}}}
						{{{{#unless spanall}}}}
							<th class="table-align-right2">
								{{{{#if qty}}}}{{{{qty}}}}{{{{else}}}}&nbsp;{{{{/if}}}}
							</th>
							<th class="table-align-left">
								{{{{#if desc}}}}{{{{desc}}}}{{{{else}}}}&nbsp;{{{{/if}}}}
							</th>
							<th class="table-align-right2">
								{{{{#if price}}}}{{{{{{dollar price}}}}}}{{{{else}}}}&nbsp;{{{{/if}}}}
							</th>
							<th class="table-align-right2">
								{{{{#if extprice}}}}{{{{{{dollar extprice}}}}}}{{{{else}}}}&nbsp;{{{{/if}}}}
							</th>
						{{{{/unless}}}}
					</tr>	
 				{{{{/each}}}}
			</table>
		</div>
	</script>,
	<script id="filterType" type="text/x-handlebars-template">
		<select class="{{{{#unless nothing}}}}filterType{{{{/unless}}}}" name="filterType">
			{{{{#each selections}}}}
			<option value="{{{{code}}}}">{{{{text}}}} ${{{{price}}}}</option>
			{{{{/each}}}}
		</select>
	</script>,
	<div class="wrapper">
		<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="xwizard">
			<div>
				<div class="product" id="merv11">
					<div class="product-title">
						<span class="title">1. Select shipping and payment plan...</span>
						<span class="price"/>
					</div>
					<table class="affiliate-table top-table" width="100%">
						<colgroup span="1" width="15%"/>
						<colgroup width="85%" align="justify"/>
						<tr>
							<th class="table-align-left">Shipping</th>
							<th class="table-align-left">
								<select class="paramChange frequencyChange" name="frequency">
								{
									for $i in 1 to 12 
									return <option value="{$i}">Every {$i} month{if($i eq 1) then () else 's'}</option>
								}
								</select>
								&nbsp;to&nbsp;
								<select class="paramChange stateChange" name="state" size="1">
									<option value="AL">Alabama</option>
									<option value="AK">Alaska</option>
									<option value="AZ">Arizona</option>
									<option value="AR">Arkansas</option>
									<option value="CA">California</option>
									<option value="CO">Colorado</option>
									<option value="CT">Connecticut</option>
									<option value="DE">Delaware</option>
									<option value="DC">Dist of Columbia</option>
									<option value="FL">Florida</option>
									<option value="GA">Georgia</option>
									<option value="HI">Hawaii</option>
									<option value="ID">Idaho</option>
									<option value="IL">Illinois</option>
									<option value="IN">Indiana</option>
									<option value="IA">Iowa</option>
									<option value="KS">Kansas</option>
									<option value="KY">Kentucky</option>
									<option value="LA">Louisiana</option>
									<option value="ME">Maine</option>
									<option value="MD">Maryland</option>
									<option value="MA">Massachusetts</option>
									<option value="MI">Michigan</option>
									<option value="MN">Minnesota</option>
									<option value="MS">Mississippi</option>
									<option value="MO">Missouri</option>
									<option value="MT">Montana</option>
									<option value="NE">Nebraska</option>
									<option value="NV">Nevada</option>
									<option value="NH">New Hampshire</option>
									<option value="NJ">New Jersey</option>
									<option value="NM">New Mexico</option>
									<option value="NY">New York</option>
									<option value="NC">North Carolina</option>
									<option value="ND">North Dakota</option>
									<option value="OH">Ohio</option>
									<option value="OK">Oklahoma</option>
									<option value="OR">Oregon</option>
									<option value="PA">Pennsylvania</option>
									<option value="RI">Rhode Island</option>
									<option value="SC">South Carolina</option>
									<option value="SD">South Dakota</option>
									<option value="TN">Tennessee</option>
									<option value="TX">Texas</option>
									<option value="UT" selected="selected">Utah</option>
									<option value="VT">Vermont</option>
									<option value="VA">Virginia</option>
									<option value="WA">Washington</option>
									<option value="WV">West Virginia</option>
									<option value="WI">Wisconsin</option>
									<option value="WY">Wyoming</option>
								</select>
								&nbsp;
								<select class="paramChange startChange" name="startChange">
									<option value="0" selected="selected">starting today</option>
									<option value="1">starting in 1 month</option>
									{
										for $i in 2 to 11 
										return <option value="{$i}">starting in {$i} months</option>
									}
									<option value="12">starting in 1 year</option>
								</select>
							</th>
						</tr>
						<tr>
							<th class="table-align-left">Payment Plan</th>
							<th class="table-align-left">
								<select class="paramChange planChange" name="paymentPlan">
									<option value="monthly">Pay now for first shipment, then make monthly payments</option>
									<option value="fullPrice">Pay at each shipment</option>
								</select>
							</th>
						</tr>
						<tr>
							<th class="table-align-left">Special Offer Code</th>
							<th class="table-align-left">
								<input class="offerChange" size="58" value="family" type="text" name="offerCode"/>&nbsp;
								<input class="validateOffer small-button-class" value="Validate" type="button"/> &nbsp; A1266ZD04
							</th>
						</tr>
					</table>
					<div class="product-title">
						<span class="title">2. Select and add filters...</span>
						<span class="price"/>
					<table width="100%">
						<colgroup align="justify">
							<col width="5%"/>
							<col width="5%"/>
							<col width="5%"/>
							<col width="5%"/>
							<col width="5%"/>
							<col width="50%"/>
						</colgroup>
						<tr class="table-align-left">
							<th>&nbsp;</th>
							<th>Qty</th>
							<th>Height</th>
							<th>Width</th>
							<th>Thickness</th>
							<th>Type</th>
						</tr>
						<tr class="table-align-left">
							<th class="table-valign-bottom">
								<input class="addItem small-button-class" value="Add" type="button"/> 
							</th>
							<th class="table-align-left">
								<input class="newQuantity" size="2" value="1" type="text" name="quantity"/>
							</th>
							<th>
								<select class="sizeChange sizeHeight" name="height"> 
									{ for $f in 10 to 60 return <option value="{$f}"> {$f} </option> } 
								</select>
							</th>
							<th>
								<select class="sizeChange sizeWidth"  name="width"> 
									{ for $f in 10 to 60 return <option value="{$f}"> {$f} </option> } 
								</select>
							</th>
							<th>
								<select class="sizeChange sizeThickness"  name="thickness"> 
									{ for $f in (1,2,4,5) return <option value="{$f}"> {$f} </option> } 
								</select>
							</th>
							<th class="table-align-left">
								<select class="filterType" name="filterType">
									<option value="1">Merv 8 Standard - $24.95</option>
									<option value="2">Merv 11 Standard - $27.95</option>
									<option value="3">Carbon Level 1 - $32.95</option>
									<option value="3">Carbon Level 2 - $42.95</option>
									<option value="3">Carbon Level 3 - $54.95</option>
									<option value="3">Custom Order - Call</option>
								</select>
							</th>
						</tr>	
					</table>
					</div>
					<!-- <div class="product-title">
						<span class="title">Order Details</span>
						<span class="price"/>
					</div> -->
					<div class="kart">
						<h3>
							<center>
								<strong>Order Details</strong>			
							</center>
						</h3>
						<div class="kart-inner">&nbsp;</div>
						{ 
							if(security:allowed('_smaf_manual_ordering')) then
								<div>
								<center>
									<input class="small-button-class manual-button" value="Manual Order Information" type="button"/>
								</center>
								<div class="manual" style="display: none;">
									<table width="100%">
										<colgroup width="20%"></colgroup>
										<colgroup width="30%" align="justify"></colgroup>
										<colgroup width="20%"></colgroup>
										<colgroup width="30%" align="justify"></colgroup>
										<tr>
											<th class="table-align-right">Name/Company</th> 
											<th class="table-align-left"><input class="paramChange mName" type="text" style="width:200px" name="name" value=""/></th>
											<th class="table-align-right">Email:</th>
											<th class="table-align-left"><input class="paramChange mEmail" type="text" style="width:200px" name="email" value=""/></th>
										</tr>
										<tr>
											<th class="table-align-right">Shipping Address:</th> 
											<th class="table-align-left"><input class="paramChange mAddr1" type="text" name="address1" style="width:200px" value=""/></th>
											<th class="table-align-right">Search Keywords:</th>
											<th class="table-align-left"><input class="paramChange mKeywords" type="text" style="width:200px" name="keywords" value=""/></th>
										</tr>
										<tr>
											<th class="table-align-right"></th>
											<th class="table-align-left"><input class="paramChange mAddr2" type="text" name="address2" style="width:200px" value=""/></th>
										</tr>
										<tr>
											<th class="table-align-right">City:</th>
											<th class="table-align-left"><input class="paramChange mCity" type="text" name="city" style="width:200px" value=""/></th>
											<th class="table-align-right">Filter(s) delivered:</th>
											<th class="table-align-left"><input class="paramChange mDelivered" type="checkbox" name="delivered"/></th>
										</tr>
										<tr>
											<th class="table-align-right">Zip:</th>
											<th class="table-align-left"><input class="paramChange mZip" type="text" name="zip" style="width:80px" value=""/></th>
											<th class="table-align-right">Initial Payment:</th>
											<th class="table-align-left"><input class="paramChange mPaid" type="text" name="payment" style="width:80px" value=""/></th>
										</tr>
									</table>
								</div>
								</div>
							else ()
						}
					</div>
					<div class="product-title">
						<span class="title">3. Complete Payment...</span>
						<span class="price"/>
					</div>
					<p class="termsconditions">
						<input type="checkbox" id="terms_conditions" />I agree to SendMeAFilter.com&lsquo;s <a href="#" id="terms" title="Click to view our terms and conditions">Terms and Conditions</a>
					</p>	
					<input class="small-button-class" value="Pay Now" type="button"/>
				</div>
			</div>
		</form>
		
		
			
	</div>
)
)

